<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>条件参数</title>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css?20191213.1">
    <link rel="stylesheet" href="/lib/layui/layui/css/common.css?v=20191213">
    <script src="/lib/layui/layui/layui.js"></script>
    <script type="text/javascript" src="/lib/layui/layui/global.js"></script>
    <script type="text/javascript" src="../../js/jquery/jquery-1.9.1.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/layui/js/baseCode/base.js?v=201907311442" type="text/javascript" charset="utf-8"></script>

    <%--<script type="text/javascript" src="/lims/layer/layer.js?20201106"></script>--%>
    <style>


        .layui-btn {
            margin-left: 10px;
        }

        .layui-btn .layui-icon {
            margin-right: 0px;
        }



    </style>
    <style>
        /*  lr 添加   */
        #addTableButton ,#ready{
            width: 70px;
            margin-top: 20px;
            margin-left: 16px;
        }

        #deleteButton{
            width: 70px;
            margin-top: 20px;
            margin-left: 16px;
            background-color: #ff5722;
        }
        #saveTbleButton{
            width: 70px;
            margin-top: 20px;
            margin-left: 89%;
            display: none;
        }
    </style>
    <style>

        .layui-btn {
            margin-left: 10px;
        }
        .layui-btn .layui-icon {
            margin-right: 0px;
        }

        #addTableButton{
            width: 70px;
            margin-top: 20px;
            margin-left: 16px;
        }
        #deleteButton{
            width: 70px;
            margin-top: 20px;
            margin-left: 16px;
            background-color: #ff5722;
        }
        #saveTbleButton{
            width: 70px;
            margin-top: 20px;
            display: none;
            position: absolute;
            right: 3%;
        }

        .layui-btn{
            margin-left: 10px;
        }
        .layui-btn .layui-icon{
            margin-right: 0px;
        }

    </style>


</head>
<body>
<%--主信息--%>
<div class="mbox">
    <div class="layui-card">
        <div>
            <button data-type="0" id="addTableButton" class="layui-btn layui-btn-sm" lay-event="add"  >添加</button>
            <button data-type="0" id="deleteButton" class="layui-btn layui-btn-sm" lay-event="add" >删除</button>
            <button data-type="0" id="ready" class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" >启用/取消</button>
            <button data-type="0" id="saveTbleButton" class="layui-btn layui-btn-sm" lay-event="add" >保存</button>
        </div>
        <div id="addTableDiv" class="layui-card-body" style="display: none">
            <table id="addTable" lay-filter="addTableFilter"></table>
        </div>
        <div class="layui-card-body">
            <table id="Settlement" lay-filter="SettlementFilter"></table>
        </div>
    </div>

</div>

<script type="text/html" id="barOperation">
    <a data-type="1" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<%--第二表格删除--%>
<script type="text/html" id="addTableDel">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del2">删除</a>
</script>


<script type="text/javascript">
    var data=[];
    var arr = [];
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        //第一个实例
        var tableIns = table.render({
            elem: '#Settlement'
            ,url: '/LimsEquipEventsPara/showAll' //数据接口
            ,page: true //开启分页
            ,toolbar:'#toolbar'
            ,cols: [[ //表头
                {type: 'checkbox'}
                ,{type: 'numbers', title: '序号', width: 60}
                ,{field: 'paraName', title: '参数名称'}
                ,{field: 'status', title: '状态',templet:function(d){
                        if(d.status == 0){
                            return '新建'
                        }else if(d.status == 1){
                            return '已启用'
                        }else{
                            return '已作废'
                        }
                    }}
                ,{field: 'memo', title: '备注'}
                ,{width:250, title: '操作',align:'center',templet: function(d){
                        if(d.status == 0){
                            return '<a data-type="1" class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>\n' +
                                '<a data-type="1" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="start">启用</a>'+
                                '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                        }else if(d.status == 1){
                            return '<a data-type="1" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="end">作废</a>'
                        }else{
                            return '<a data-type="1" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="start">启用</a>'
                        }
                    }}
            ]]
            ,done:function(obj){
                form.render()

            }

        });

        //第二个实例
        table.render({
            elem: '#addTable'
            ,data:data
            ,cols: [[ //表头
                {type: 'numbers', title: '序号',}
                , {field: 'paraName', title: '参数名称', edit:true}
                , {field: 'memo', title: '备注',edit:true}
                , { width: 240, title: '操作', align: 'center', toolbar: '#addTableDel'}
            ]]
            ,done:function (obj) {
//

            }
        });

        //第一个表格的工具事件
        table.on('tool(SettlementFilter)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var me=$(this);
            var isEdit=$(this).data("edit"); //是否编辑
            var type=0;
            if (layEvent === 'edit') { //编辑
                edit(me,obj);
            }else if(layEvent=='del'){//删除
                var ids='';
                ids+=data.paraId;
                publicDelete("/LimsEquipEventsPara/delete",ids,tableIns,table);
            } else if(layEvent=='top'){ //上移
                var index=tr.attr("data-index");
                var prevIndex = tr.prev().attr('data-index');
                //排序号
                var No = tr.find('td').eq(5).text();
                var prevNo =  tr.prev().find('td').eq(5).text();
                //序号
                var Num = tr.find('td').eq(1).text();
                var prevNum =  tr.prev().find('td').eq(1).text();

                tr.addClass('bgss').siblings('tr').removeClass('bgss')
                if(No == prevNo){
                    layer.msg("请选中不同排序号的行");
                    return false;
                }else if(prevIndex == undefined){
                    layer.msg("不可移动");
                    return false;
                }else{
                    tr.find('td').eq(5).find('div').text(prevNo)
                    tr.prev().find('td').eq(5).find('div').text(No)
                    tr.find('td').eq(1).find('div').text(prevNum)
                    tr.prev().find('td').eq(1).find('div').text(Num)
                    tr.prev().before(tr);
                }
                if(index!=0 && index!="0"){
                    var dataAll =  table.cache["Settlement"];
                    var datatop=dataAll[(parseInt(index)-1)];
                    splitCloum(datatop,data);
                }
            }else if(layEvent=='bottom'){//下移
                var index=tr.attr("data-index");
                var nextIndex = tr.next().attr('data-index');
                //排序号
                var No = tr.find('td').eq(5).text();
                var NextNo =  tr.next().find('td').eq(5).text();
                //序号
                var Num = tr.find('td').eq(1).text();
                var NextNum =  tr.next().find('td').eq(1).text();

                tr.addClass('bgss').siblings('tr').removeClass('bgss');

                if(No == NextNo){
                    layer.msg("请选中不同排序号的行");
                    return false;
                }else if(nextIndex == undefined){
                    layer.msg("不可移动");
                    return false;
                }else{
                    tr.find('td').eq(5).find('div').text(NextNo)
                    tr.next().find('td').eq(5).find('div').text(No)

                    tr.find('td').eq(1).find('div').text(NextNum)
                    tr.next().find('td').eq(1).find('div').text(Num)
                    tr.next().after(tr);
                }
                var dataAll =  table.cache["Settlement"];
                if(parseInt(index)!=dataAll.length-1){
                    var data2=dataAll[(parseInt(index)+1)]
                    splitCloum(data2,data);
                }
            }else if(layEvent=='start'){//启用
                changeStatus(data.paraId,'1');
            }else if(layEvent=='end'){//作废
                changeStatus(data.paraId,'2');
            }

        });

        //第二个表格的工具事件
        table.on('tool(addTableFilter)',function (obj) {
            var layEvent = obj.event; //获得 lay-event 对应的值
            var datatr = obj.data;//获取行数据
            var tr = obj.tr;
            var me=$(this);

            if(layEvent=='del2'){
                var index=tr.attr("data-index");
                obj.del(tr);
                data =  table.cache["addTable"];
                data.splice(parseInt(index),1);
                table.reload('addTable',{
                    data : data
                });
                var trs=$("#addTableDiv").find(".layui-table-body").find("tr");
                if(trs.length==0){//代表最后一个已经被删除
                    closeTable();
                }
            }

        });



        //编辑
        function edit(me,obj){
            var tr=obj.tr;
            var data=obj.data;
            var json={};
            json.iteCondId = data.iteCondId;
            json.codeunitname = data.codeunitname

            arr.push(json);
            //点击编辑
            if (me.attr('data-type') == "1") {
                me.attr('data-type', 0);
                var tds = tr.find('td');
                tds.eq(2).data('edit', true)
                tds.eq(4).data('edit', true)

                form.render()
                tr.css("background-color", "rgb(242, 242, 242)");
                me.text('保存')
                me.parent("div").append('<a id="cancel"style="width:34px;height:22px;line-height:22px;padding-left:5px;" class="layui-btn layui-btn-sm">取消</a>')
            } else {
                //点击保存
                tr.find('td').data('edit', false)
                me.attr('data-type', "1")
                tr.css("background-color", "white");
                me.text('编辑')
                $("#cance").remove();

                save(data);
            }
        }
         $(document).on('click','#cancel',function(){
             tableIns.reload();
         })

        //添加按钮点击事件
        $("#addTableButton").click(function () {
            var type=$(this).attr("data-type");
            if(type=="0"){ //未点击
                //代表还未点击过添加
                data=[];//置空，默认一个
                table.reload('addTable',{
                    data : data
                });
                var $addTable=$("#addTableDiv");//得到第二个实例
                $addTable.css("display","block");
                $(this).attr("data-type","1");
                $("#saveTbleButton").css("display","inline-block");
                $("#addTableButton").click();
            }else{
                data =  table.cache["addTable"];
                var data1={
                    inputType :"",
                    tableHeader:"",
                    unitIds:"",
                    unitNames:""
                };
                data.push(data1);
                table.reload('addTable',{
                    data : data
                });


            }
        });

        /*
        * 创建作者:   廉立深
        * 创建日期:   18:28 2019/7/25
        * 方法介绍:   启用取消事件
        * 参数说明:
        * @return
        */
        $("#ready").click(function () {

            var type=$(this).attr("data-type");
            var data=layui.table.checkStatus('Settlement').data;

            if(type=="0"){
                if(data.length>0){
                    var  ids='';
                    var status1='';

                    for (var i=0;i<data.length;i++){
                        ids+=data[i].paraId+',';

                        //判断是否是相同状态
                        if((i+1)<data.length) {
                            if (data[i].status != data[(i + 1)].status) {
                                layer.msg("请选中相同状态的行");
                                return false;
                            }
                        }

                    }
                    //0新建，1启用，2作废
                    if (data[0].status==0){
                        status1=1;
                    }else if(data[0].status==1){
                        status1=2;
                    }else{
                        status1 = 1;
                    }
                    $.get("/LimsEquipEventsPara/changeStatus",{paraIds:ids , status:status1 },function (res) {
                        layer.msg("操作成功");
                        tableIns.reload();//重载表格
                    });

                }else {
                    layer.msg("请选中要修改的状态行");
                }
            }
        });


        /**
         * 王佳兴
         * @param iteCondId
         * 主表启用取消事件
         */
        function changeStatus(paraId,status) {
            var url='/LimsEquipEventsPara/changeStatus';
            var data={
                paraIds: paraId,
                status:status
            }
            var res=toAjaxT(url,data);
            if(res.code==0) {
                tableIns.reload();
            }
        }


        //多选删除按钮点击事件
        $("#deleteButton").click(function () {
            var data=layui.table.checkStatus('Settlement').data;
            if(data.length>0){
                var ids='';
                for(var i=0;i<data.length;i++){
                    if((i+1)<data.length){
                        if(data[i].status!=data[(i+1)].status){
                            layer.msg("请选择相同状态的行");
                            return false;
                        }
                    }
                    if (data[i].status=="0"){ //新建状态,其他状态不可删除
                        ids+=data[i].paraId+",";
                    }
                }
                if(ids!=null && ids!=''){
                    publicDelete("/LimsEquipEventsPara/delete",ids,tableIns,table);
                }else {
                    layer.msg("只能删除新建状态");
                }

            }else{
                layer.msg("请选中要删除的行");
            }
        })


        //第二表格保存
        $("#saveTbleButton").click(function () {
            var data =  table.cache["addTable"]; //获取要保存的数据
            var param= {
                json:JSON.stringify(data)
            }
            var res=toAjaxT("/LimsEquipEventsPara/add",param);
            layer.msg(res.msg);
            //重载第一表格
            tableIns.reload();
            //关闭第二表格
            closeTable();
        })


        // 第一表格保存函数
        function save(data) {
            $.post("/LimsEquipEventsPara/update",data,function (res) {
                    layer.msg(res.msg);
                    tableIns.reload();//重载表格
            })
        }


        //截取上下移抛出字段
        function splitCloum(data,datatop){
            var data1={};
            data1.iteCondId=data.iteCondId;
            data1.sort=data.sort;
            var data2={};
            data2.iteCondId=datatop.iteCondId;
            data2.sort=datatop.sort;
            topAndbottom(data1,data2);
        }

        //o为上移，1为下移
        function topAndbottom(data,data2) {
            var url='/conditions/updateByLimsIteConditionsSort';
            var jsonArray=new Array();
            jsonArray.push(data)
            jsonArray.push(data2)
            var data={
                json:JSON.stringify(jsonArray)
            }
            var res=toAjaxT(url,data);
            // if(res.code==0) {
            //     tableIns.reload();
            // }
        }

        //判断是否是undefined
        function undefind_nullStr(value) {
            if(value==undefined){
                return ""
            }
            return value
        }

        //关闭方法
        function closeTable() {
            $("#addTableButton").attr("data-type","0");
            var $addTable=$("#addTableDiv");//得到第二个实例
            $addTable.css("display","none");
            $("#saveTbleButton").css("display","none");
        }


    });
</script>

</body>


</html>